<template>
  <el-dialog
    v-model="visible"
    class="base-dialog rounded-[10px]"
    :title="title"
    :width="width"
    :before-close="handleClose"
    v-bind="$attrs"
    :close-on-click-modal="false"
    @open="handleOpen"
  >
    <div
      v-loading="loading"
      class="body-wrapper"
      :class="autoHeight ? '' : 'fixedHeight'"
    >
      <slot></slot>
    </div>
    <template #footer v-if="showBody">
      <span class="dialog-footer">
        <el-button
          v-if="showConfirmButton"
          :loading="loading"
          :disabled="confirmDisable"
          type="primary"
          @click="handleConfirm"
          >{{ confirmText }}</el-button
        >
        <el-button
          v-if="showCancelButton"
          :disabled="loading"
          class="text-[#666]"
          @click="handleClose"
          >取消</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
interface IProps {
  title?: string
  visible: boolean
  width?: number
  autoHeight?: boolean
  confirmText?: string
  showConfirmButton?: boolean
  showCancelButton?: boolean
  loading?: boolean
  confirmDisable?: boolean
  showBody?: boolean
  showFooter?: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false,
  loading: false,
  confirmDisable: false,
  title: '提示',
  width: 580,
  autoHeight: true,
  confirmText: '确定',
  showCancelButton: true,
  showConfirmButton: true,
  showBody: true,
  showFooter: true
})
const emit = defineEmits([
  'update:modelValue',
  'closeDialog',
  'handleConfirm',
  'close',
  'confirm',
  'open'
])

// 子组件定义自己的visible
const visible = computed({
  get: () => props.visible,
  set: value => {
    emit('update:modelValue', value)
  }
})

// 打开
const handleOpen = () => {
  emit('open')
}
// 关闭弹窗
const handleClose = () => {
  if (props.loading) return
  emit('closeDialog')
  emit('close')
  // visible.value = false
}

// 点击确定
const handleConfirm = () => {
  emit('handleConfirm')
  emit('confirm')
}
</script>

<style lang="scss" scoped>
.body-wrapper {
  // overflow: auto;
}

.fixedHeight {
  max-height: 56vh;
}
</style>

<style lang="scss">
.base-dialog {
  @apply text-[12px];
  .el-dialog__headerbtn {
    font-size: 18px;
    color: #000;
  }
  .el-dialog__header {
    height: 55px;
    border-radius: 10px;
    border-bottom: 1px solid #f6f6f6;
    text-align: center;
    .el-dialog__title {
      font-size: 14px;
      font-weight: 500;
      color: #000;
    }
  }
  .el-dialog__body {
    padding: 46px 40px 48px;
    box-sizing: border-box;
    color: #666666;
  }
  .hidden-body {
    :deep(.el-dialog__footer) {
      display: none;
    }
  }
  .el-dialog__footer {
    height: 48px;
    padding: 8px 16px;
    border-top: 1px solid #f6f6f6;
    .dialog-footer {
      .el-button:nth-child(2) {
        margin-left: 15px;
      }
    }
  }
}
</style>
